<!DOCTYPE html>
<html>
<head>
    <title>健康资讯</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
    <link href="/static/css/jquery.mobile-1.4.3.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/overwrite.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/static/js/jquery-1.8.2.min.js"></script>
    <script type='text/javascript' src='/static/js/jquery.tmpl.js'></script>
    <script type="text/javascript" src="/static/js/jquery.mobile-1.4.3.js"></script>
    <script>
        var _endIndex = 4;
        var _categoryId = {{ categoryId }};
        var curHeight=0;

        $(function() {
            var history_height=$(document).scrollTop();
            $(document).bind('scroll', function () {
                var maxheight=$(document).height();
                console.log('maxheight:'+maxheight+'curHeight'+curHeight);
                var doc = document,
                        win = window,
                        $ScrollBottom = $(doc).height() - $(win).height() - $(win).scrollTop();
                if($ScrollBottom==0&&(maxheight!=curHeight)){
                   var  current=_endIndex;
                   $.get('/information/category/'+ _categoryId +'/'+ _endIndex, function(data){
                       curHeight=$(document).height();
                      console.log('sibu:'+$ScrollBottom);
                      console.log('_endIndex:'+_endIndex);
                      console.log('data.endIndex_endIndex:'+data.endIndex);
                       if( _endIndex == data.endIndex){
                            $('.ui-footer .load').html('已加载完全部内容');
                       }
                       _endIndex = data.endIndex;

                      _data = []

                      for(var i=0; i<data.data.length; i++){
                        var item = JSON.parse(data.data[i]);
                            _data.push(item);
                      }

                      $.tmpl( $('#_listItemTmpl').html(),_data).appendTo('#_listView');
                      $('ul').listview('refresh');

                    },'json')
                }
            });

        });
    </script>

</head>
<body id="healthInfo">
    <div data-role="page" id="pageone">
       <!--微信自带返回      不写head-->
        <div data-role="main" style="border: 0px">
          <div class="infoClassify">
              <div class="ui-grid-e" style="overflow:  auto">
                  {% for ic in ics %}
                    <div class="ui-block-a"><div class="ui-body ui-body-d">{{ ic.name }}</div></div>
                  {% endfor %}
              </div>
          </div>
            <div class="infoList" style="overflow: auto">
                <div class="ui-grid-a infoListFirst">
                    <img height="120px" src="/static/images/health.png"/>
                    <div class="firstTitle">
                        <h2>食品安全需要“第三者”!</h2>
                    </div>
                </div>
                <ul id='_listView' data-role="listview">
                    {% for i in is %}
                      <li>
                        <a href="/information/detail/{{ i.id }}/" data-transition="slide">
                          <img height='500px' width='500px' src="/{{ i.image }}">
                          <h2>{{ i.title }}</h2>
                          <p>{{ i.context }}</p>
                        </a>
                      </li>
                    {% endfor %}
                </ul>
                <div data-role="footer" class="ui-bar">
                    <div class="load"><img class="fl" src="/static/images/loading.gif" width="16px"><p class="fl">正在努力加载中...</p></div>
                </div>
            </div>
        </div>
    </div>
    <div id='tmplContent'>
      <div id='_listItemTmpl'>
          <li>
              <a href="/information/detail/${id}/" data-transition="slide">
                  <img src="/${image}">
                  <h2>${title}</h2>
                  <p>${context}</p>
              </a>
          </li>
      </div>
    </div>
</body>
</html>